<template>
<div>
  <div class="icon"></div>
  <div class="toggleBar">
    <span><router-link to="login" >登录</router-link></span>
    <span><router-link to="register">注册</router-link></span>
    <!--<div class="togg"></div>-->
  </div>
  <transition name="slide">
    <router-view></router-view>
  </transition>
 </div>
</template>

<script>
export default {
  name: 'auth',
  data() {
    return {
      msg: true,
    };
  },
  methods: {
    a() {
      this.msg = false;
    },
  },
};
</script>

<style scoped lang="scss">
  *{
    margin: 0;
    padding: 0;
    user-select: none;
  }
  #app{
    font-size: 0;
    padding: 5px;
  }
  .icon{
    width: 40px;
    height: 40px;
    margin:100px auto;
    background-image: url("./img/index.jpg");
    background-size: 40px;
    border-radius: 3px;
  }
  .toggleBar{
    font-size: 0;
    text-decoration: none;
  }
  .togg{
    width: 35px;
    height: 5px;
    background-color: red;
    position: absolute;
    left: 20vw;
    transition: all 2s ease-in;
  }
  .togg2{
    width: 35px;
    height: 5px;
    background-color: red;
    position: absolute;
    left: 20vw;
    transition: all 2s ease-in;
  }
  .toggleBar>span{
    box-sizing: border-box;
    width: 50%;
    display: inline-block;
    font-size: 16px;
    text-align: center;
    cursor:pointer;
  }
  .slide-enter{
    opacity: 0;
  }
  .slide-leave-to{
    opacity: 1;
  }
  .slide-leave-active,.slide-enter-active{
    transition: all ease-in 1s;
  }
  .slide-enter-to{
    opacity: 1;
  }
  .slide-leave{
    opacity: 0;
  }
</style>
